<template>
  <view style="padding: 12px">
    <navbar/>
    <h3>表单组件</h3>
    <view>
      <h4>复选框checkbox</h4>
      <text>modelValue：{{ checkBox }}</text>
      <check-box v-model="checkBox" :list="dictList('sf')"/>
    </view>
    <u-divider/>
    <view>
      <h4>单选框radioButton</h4>
      <text>modelValue：{{ radioButton }}</text>
      <radio-button v-model="radioButton" :list="dictList('sex')"/>
    </view>
    <u-divider/>
    <view>
      <h4>上传图片uploadImage</h4>
      <text>modelValue：{{ uploadImage }}</text>
      <upload-image v-model="uploadImage" dir="test"/>
    </view>
    <u-divider/>
    <view>
      <h4>日期选择datePicker</h4>
      <text>modelValue：{{ datePicker }}</text>
      <date-picker v-model="datePicker" type="date" max-date="2025-12-31 23:59:59" min-date="2023-01-01 00:00:00"/>
    </view>
    <u-divider/>
    <view>
      <h4>时间选择dateTimePicker</h4>
      <text>modelValue：{{ dateTimePicker }}</text>
      <date-picker
        v-model="dateTimePicker" type="datetime" max-date="2025-12-31 23:59:59"
        min-date="2023-01-01 00:00:00"/>
    </view>
    <u-divider/>
    <view>
      <h4>选择器listPicker</h4>
      <text>modelValue：{{ listPicker }}</text>
      <list-picker v-model="listPicker" :columns="dictList('sf')"/>
    </view>
    <u-divider/>
    <view>
      <h4>系统用户systemUser</h4>
      <text>modelValue：{{ systemUser }}</text>
      <system-user v-model="systemUser"/>
    </view>
    <u-divider/>
    <view>
      <h4>组织机构systemOrganization</h4>
      <text>modelValue：{{ systemOrganization }}</text>
      <system-organization v-model="systemOrganization"/>
    </view>
    <u-divider/>
    <view>
      <h4>树形选择treeSelect</h4>
      <text>modelValue：{{ treeSelect }}</text>
      <tree-select v-model="treeSelect" :list="list"/>
    </view>
    <u-divider/>
    <h3>显示组件</h3>
    <view>
      <h4>系统用户systemUserCell</h4>
      <text>modelValue：{{ systemUser }}</text>
      <system-user-cell v-model="systemUser"/>
    </view>
    <view>
      <h4>组织机构systemOrganizationCell</h4>
      <text>modelValue：{{ systemOrganization }}</text>
      <system-organization-cell v-model="systemOrganization"/>
    </view>
    <view>
      <h4>图片列表imageGallery</h4>
      <text>modelValue：{{ imageGallery }}</text>
      <image-gallery v-model="imageGallery"/>
    </view>
    <view>
      <h4>二维码qrCode</h4>
      <text>qrCode：{{ qrCode }}</text>
      <qr-code :text="qrCode" :size="200"/>
    </view>

  </view>

</template>

<script>
import CheckBox from '@/components/CheckBox/checkBox.vue'
import RadioButton from '@/components/RadioButton/RadioButton.vue'
import UploadImage from '@/components/Upload/uploadImage.vue'
import ImageGallery from '@/components/ImageGallery/imageGallery.vue'
import Navbar from '@/components/Navbar/navbar.vue'
import DatePicker from '@/components/Picker/datePicker.vue'
import ListPicker from '@/components/Picker/listPicker.vue'
import SystemUser from '@/components/System/systemUser.vue'
import SystemOrganization from '@/components/System/systemOrganization.vue'
import SystemUserCell from '@/components/System/systemUserCell.vue'
import SystemOrganizationCell from '@/components/System/systemOrganizationCell.vue'
import TreeSelect from '@/components/TreeSelect/treeSelect.vue'
import QrCode from '@/components/QrCode/qrCode.vue'

const url = [
  'https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg',
  'https://fuss10.elemecdn.com/1/34/19aa98b1fcb2781c4fba33d850549jpeg.jpeg',
  'https://fuss10.elemecdn.com/0/6f/e35ff375812e6b0020b6b4e8f9583jpeg.jpeg',
  'https://fuss10.elemecdn.com/9/bb/e27858e973f5d7d3904835f46abbdjpeg.jpeg',
  'https://fuss10.elemecdn.com/d/e6/c4d93a3805b3ce3f323f7974e6f78jpeg.jpeg',
  'https://fuss10.elemecdn.com/3/28/bbf893f792f03a54408b3b7a7ebf0jpeg.jpeg',
  'https://fuss10.elemecdn.com/2/11/6535bcfb26e4c79b48ddde44f4b6fjpeg.jpeg'
]

const treeList = [
  {
    'id': '1679331156115337218',
    'name': '一级目录',
    'children': [
      {
        'id': '1679331368095461377',
        'name': '二级目录',
        'parentId': '1679331156115337218',
        'parentIds': '1679331156115337218/',
        'children': [
          {
            'id': '1679411230504136705',
            'name': '三级目录',
            'parentId': '1679331368095461377',
            'parentIds': '1679331156115337218/1679331368095461377/',
            'children': []
          }
        ]
      },
      {
        'id': '1679331375808786434',
        'name': '二级目录2',
        'parentId': '1679331156115337218',
        'parentIds': '1679331156115337218/',
        'children': []
      }
    ]
  }]

export default {
  name: 'ComponentSample',
  components: {
    QrCode,
    TreeSelect,
    SystemOrganizationCell,
    SystemUserCell,
    SystemOrganization,
    SystemUser,
    ListPicker,
    DatePicker,
    Navbar,
    ImageGallery,
    UploadImage,
    RadioButton,
    CheckBox
  },
  data() {
    return {
      checkBox: '0',
      radioButton: '1',
      uploadImage: undefined,
      systemUser: '1663023749615980545',
      systemOrganization: '1663381481179189254',
      datePicker: Number(new Date()),
      dateTimePicker: Number(new Date()),
      listPicker: '1',
      treeSelect: '1679331368095461377',
      imageGallery: url.join(','),
      list: treeList,
      qrCode: 'http://www.sunseagear.com'

    }
  }
}
</script>
<style lang="scss" scoped>
text {
  margin-top: 10px;
  margin-bottom: 20px;
}
</style>

